<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>绑定手机号码</title>
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link href="../../css/data-flex.min.css" rel="stylesheet" type="text/css">
    <style>
        body {
            background: rgba(255, 255, 255, 1);
        }

        .header {
            height: 230px;
            background: rgba(90, 194, 255, 1);
        }

        .bg {
            height: 230px;
            background: url("../../image/ui/bg_3.png");
            background-size: 100% 100%;
        }

        .close {
            width: 22px;
            height: 22px;
            margin: 33px 20px 0 0;
        }

        .h1 {
            font-size: 36px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            margin-top: 25px;
            margin-left: 40px;
        }

        .h2 {
            font-size: 14px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            margin-top: 20px;
            margin-left: 40px;
        }

        .container {
            z-index: 2;
            position: relative;
            margin-top: -56px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px -2px 22px 0px rgba(0, 161, 255, 0.28);
            border-radius: 20px 20px 0px 0px;
            padding: 35px 40px 30px 40px;
        }

        .row {
            height: 50px;
            background: rgba(245, 245, 245, 1);
            border-radius: 25px;
        }

        .icon {
            width: 18px !important;
            min-width: 18px;
            height: 18px;
            margin-left: 19px;
        }

        .area-number {
            min-width: fit-content;
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            margin-left: 18px;
        }

        input {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        input::placeholder {
            font-size: 15px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
        }

        .get-verificode {
            min-width: 75px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(90, 194, 255, 1);
            margin-right: 20px;
            text-align: right;
        }

        .btn {
            margin: 45px auto 0 auto;
            width: 210px;
            height: 46px;
            padding-top: 8px;
            background: url("../../image/ui/btn.png");
            background-size: 100% 100%;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: rgba(124, 69, 0, 1);
            line-height: 25px;
        }

        .user-argeement {
            font-size: 12px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            text-align: center;
            margin-top: 100px;
        }

        .user-argeement-highlight {
            color: rgba(90, 194, 255, 1);
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <header class="header">
            <div class="bg">
                <div data-flex="main:right">
                    <div class="close">
                        <img src="../../image/ui/close_2.png" alt="" tapmode onclick="fnBack()">
                    </div>
                </div>
                <div class="h1">绑定手机号</div>
                <div class="h2">完善手机信息</div>
            </div>
        </header>
        <div class="container" id="login">
            <div class="row" data-flex="cross:center" id="tel_login">
                <div class="icon">
                    <img src="../../image/ui/phone.png" alt="">
                </div>
                <div class="area-number">
                    +86
                </div>
                <input style="text-indent: 8px;" data-flex-box="1" spellcheck="false" type="tel"
                    oninput="value=value.replace(/[^\d0-9]/g,'')" v-model="telephone" maxlength="11"
                    data-type="_telphone" data-verify="true" data-null="true" data-regular="true" name="手机号"
                    placeholder="请输入电话号码">
            </div>
            <div class="row" style="margin-top: 26px;" data-flex="cross:center box:justify">
                <div class="icon">
                    <img src="../../image/ui/verificode.png" alt="">
                </div>
                <input style="text-indent: 18px;" data-flex-box="1" spellcheck="false" type="tel"
                    oninput="value=value.replace(/[^\d0-9]/g,'')" v-model="verify_code" maxlength="6" data-type="_code"
                    data-verify="true" data-null="true" data-regular="true" name="验证码" placeholder="6位数字验证码">
                <div class="get-verificode" tapmode @click="isSendCode?fnGetCode():''">{{sendBtnText}}</div>
            </div>
            <div class="btn" tapmode @click="fnLogin()">下一步</div>
            <div class="user-argeement">登录注册即同意<span class="user-argeement-highlight">《用户协议》</span>
                <span class="user-argeement-highlight">《隐私协议》</span></div>
        </div>
        <!-- <div class="login_input login_input_tips">
            <input  spellcheck="false" class="" type="text" v-model="userName" minlength="6" maxlength="16" data-type="_userName" data-verify="true" data-null="true" data-regular="true" name="用户名" placeholder="请设置用户名">
            <p class="public_line_top">数字字母组合</p>
        </div>
        <div class="login_input login_input_tips">
            <input  spellcheck="false" type="password" v-model="password" minlength="6" maxlength="15" data-type="_password" data-verify="true" data-null="true" data-regular="true" name="密码" placeholder="请输入密码，至少6位">
            <p class="public_line_top">6位以上数字或字母</p>
        </div>
        <p class="login_tips">已有账号？<span class="font_subject_color">点击登录</span></p>
        <div class="login_bottom":style="'margin-top:'+loginSpace+'px;'">
            <p class="user_agreement">注册即同意<span class="font_subject_color">《用户使用协议》</span></p>
        </div> -->
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-login.js"></script>
<script type="text/javascript" src="../../script/service/service-verify.js"></script>
<script type="text/javascript">
    var $S, USER;
    var vm, pageParam = {};
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        pageParam = deepCopy(api.pageParam);
        fnInit();
    }

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                key: pageParam.thirdType || "",
                threeLoginId: pageParam.threeLoginId || "",
                // loginSpace: 0,
                telephone: "",
                verify_code: "",
                userName: "1",
                password: "1",
                isAvailable: false, //登录按钮是否可用
                sendBtnText: "获取验证码",
                isSendCode: true,
                nickName: pageParam.nickName || "",
                avatar: pageParam.avatar || ""
            },
            methods: {
                fnGetCode: function () {
                    fnGetVerifyCode()
                },
            },
            watch: { //监听手机号和密码的值，来判断开启和关闭登录按钮的点击状态
                telephone: function () {
                    fnLoginBtnStatus(this);
                },
                verify_code: function () {
                    fnLoginBtnStatus(this);
                }
                // userName: function() {
                //     fnLoginBtnStatus(this);
                // },
                // password: function() {
                //     fnLoginBtnStatus(this);
                // }
            }
        })
    }

    //修改登录按钮的启用状态
    function fnLoginBtnStatus(el) {
        if (!isEmpty(vm.telephone) && !isEmpty(vm.verify_code)) {
            vm.isAvailable = true;
        } else {
            vm.isAvailable = false;
        }
    }
    //获取验证码
    function fnGetVerifyCode() {
        if (fnVerify("tel_login")) {
            $S.ShowProgress();
            var postData = {
                "phone": vm.telephone,
                "loginType": '5'
            }
            $S.POST("verifyCode/sendCode", postData, function (ret, err) {
                if (ret && "200" == ret.status) {
                    // vm.isSendCode = false;
                    // fnVerifyTime('60', vm);
                    if (ret.data.IsRegister == '0') { //该手机号已注册
                        fnToast("该手机号已注册")
                    } else {
                        vm.isSendCode = false;
                        fnVerifyTime('60', vm);
                    }
                }
                $S.CloseProgress();
            })
        }
    }
    // 第三方绑定手机号，或者第三方绑定用户
    function fnLogin() {
        if(!vm.telephone) {
            fnToast('请输入手机号');
        } else if(!vm.verify_code) {
            fnToast('请输入验证码');
        }
        if (fnVerify("login")) {
            // $S.ShowProgress();
            // var postData = {
            //     "phone": vm.telephone,
            //     "code": vm.verify_code
            // };
            // // 1. 判断验证码和手机号是否匹配
            // // 2. 跳转选择身份页面
            // $S.POST("apiTbAppUser/perfectUserInfo", postData, function (ret, err) {
            //     if (ret && ret.status == '200') {
            //         fnOpenPublicWin('设置登录密码', 'login/set_password', {
            //             phone: vm.telephone,
            //             code: vm.verify_code,
            //             loginPageParams: pageParam
            //         });
            //     };
            //     $S.CloseProgress();
            // })
            $S.ShowProgress();
            var postData = {
                // phone  code   messType   thirdPartyId   threeType      headPortrait
                // "threeType": vm.key * 1 + 100 + "",
                // "thirdPartyId": vm.threeLoginId,
                // "phone": vm.telephone,
                // "messType":  vm.key * 1 + 100 + "", //4：微信登录5: qq登录6: 微博登录
                // "code": vm.verify_code,
                // "thirdnickName": vm.nickName,
                // "headPortrait": vm.avatar,
                "thirdType": '5', //vm.key,
                "thirdPartyId": vm.threeLoginId,
                "code": vm.verify_code,
                "phone": vm.telephone,
                // 'nickname': vm.nickname,
                // 'icon': vm.avatar
            };
            $S.POST("apiTbAppUser/thirdPartyBinding", postData, function (ret, err) {
                if (ret && "200" == ret.status) {
                    if(ret.data.custId) {
                        fnToast("绑定成功");
                        fnWhenLoginSucess(ret.data);
                        api.sendEvent({
                            name: 'loginStatus',
                            extra: {
                                login: true,
                            }
                        });
                        api.closeToWin({
                            name: 'main'
                        })
                    }else {
                        fnOpenPublicWin('设置登录密码', 'login/set_password', {
                            phone: vm.telephone,
                            code: vm.verify_code,
                            loginPageParams: pageParam
                        });
                        fnDelayCloseWin(400);
                    }
                }
                $S.CloseProgress();
            })
        }
    }

    function fnBack() {
        fnDelayCloseWin()
    }
</script>

</html>